28. Przechwytywanie zdarze± |
Przechwytywanie zdarze± jest jednym z ciekawszych aspekt≤w jΩzyka JavaScript. Pozwala na rozszerzon▒ obs│ugΩ zdarze±. Polega to na definiowaniu funkcji, kt≤re maj▒ zostaµ wywo│ane, kiedy dane zdarzenie bΩdzie mia│o miejsce. I tutaj zaczynaj▒ siΩ schody, poniewa┐ ta mo┐liwo╢µ jest niestety kolejnym przyk│adem, jak r≤┐ni siΩ interpretowanie skrypt≤w przez r≤┐ne przegl▒darki, a przede wszystkim Internet Explorer i Netscape Navigator. Z powodu tych r≤┐nic musimy praktycznie napisaµ nasz skrypt podw≤jnie. Zobaczmy prosty przyk│ad:
<SCRIPT LANGUAGE="JavaScript">
<!--
ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;
if (ie)
document.onmousedown = napis;
else if (n)
{
window.captureEvents(EVENT.MOUSEDOWN);
window.onmousedown = napis;
}
function napis()
{
alert("Nie klikaj prawym przyciskiem");
}
//-->
</SCRIPT>
Na samym pocz▒tku musimy wykryµ przegl▒darkΩ internetow▒ u┐ytkownika. Ka┐da ma swoje unikalne w│a╢ciwo╢ci, tote┐ sprawdzamy, czy przegl▒darka obs│uguje dan▒ i ju┐ wiemy, czy to jest ta przegl▒darka, czy inna. Tak▒ przyk│adow▒ w│a╢ciwo╢ci▒ dla Internet Explorer jest document.all, a dla Netscape Navigator - document.layers. Niestety s▒ to jedne z wielu, a przytoczy│em w│a╢nie te, poniewa┐ s▒ one u┐ywane zwyczajowo. W ca│ym procederze korzystamy z operatora () ? :. Dalej w zale┐no╢ci od przegl▒darki przechwytujemy zdarzenie podpinaj▒c pod nie wywo│anie funkcji napis
. Da to taki efekt, ┐e przy ka┐dym klikniΩciu myszk▒ w dokument zostanie wy╢wietlone okienko dialogowe z komunikatem.
Teraz wzbogacimy nasz skrypt o detekcjΩ wci╢niΩtego przycisku myszy. Od tej pory komunikat bΩdzie siΩ wy╢wietla│ tylko po wci╢niΩciu prawego klawisza:
<SCRIPT LANGUAGE="JavaScript">
<!--
ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;
if (ie)
document.onmousedown = napis;
else if (n)
{
window.captureEvents(EVENT.MOUSEDOWN);
window.onmousedown = napis;
}
function napis(e)
{
if (ie && event.button == 2)
{
alert("Nie klikaj prawym przyciskiem");
return(false);
}
if (n && e.which == 2)
{
alert("Nie klikaj prawym przyciskiem");
return(false);
}
}
//-->
</SCRIPT>
W podobny spos≤b mo┐emy r≤wnie┐ sczytaµ wsp≤│rzΩdne kursora w oknie. Tutaj jednak wykorzystamy zdarzenie onMouseMove. Pobrane dane bΩdziemy wypisywaµ na formularzu - w obiektach text. Zobaczmy kod:
<SCRIPT LANGUAGE="JavaScript">
<!--
ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;
if (ie)
document.onmousemove = wspolrzedne;
else if (n)
{
window.captureEvents(EVENT.MOUSEMOVE);
window.onmousemove = wspolrzedne;
}
function wspolrzedne(e)
{
txt = document.formularz.pole_textowe;
if (ie)
{
txt.value = "x: " + (document.body.scrollLeft + event.clientX)
+ "; y: " + (document.body.scrollTop + event.clientY);
return(false);
}
if (n)
{
txt.value = "x: " + e.pageX + "; y: " + e.pageY;
return(false);
}
}
//-->
</SCRIPT>
..i jeszcze formularz:
<FORM NAME="formularz">
<INPUT TYPE="text" NAME="pole_textowe">
</FORM>
Efekt jest taki:
Widzimy, ┐e wsp≤│rzΩdne podawane s▒ od faktycznego naro┐nika dokumentu, a nie tylko od widocznej jego czΩ╢ci. Mo┐na to oczywi╢cie zmieniµ usuwaj▒c z kodu document.body.scrollLeft
oraz document.body.scrollTop
.
![]() ![]() ![]() |